<template>
  <div class="popup-div">
    <el-input
      v-model="carId"
      style="width: 150px"
      placeholder="请输入车的编号"
    />
    <el-button type="primary" @click="addCar">确认</el-button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import {createMarker} from '@/utils'
import {useMapStore,usePostStore} from '@/stores'
import { postCar,getCarNum,updateCarNum} from "@/api/api";
const mapStore = useMapStore();
const postStore = usePostStore();
const {updatePostCarResult} = postStore;
const map = mapStore.Map;
const props = defineProps({
  currentCoordinates: {
    type: Array,
    reqiured: true,
  },
});
const carId = ref("");
const addCar = async() => {
  if (!carId.value) {
    ElMessage({ message: "车辆的编号不能为空", type: "warning" });
    return;
  }
  const data = {
    id: carId.value,
    coordinates: props.currentCoordinates,
    state: "正常",
    power: "100%",
    mileage: "0",
    count: 0,
    investDate: "2024-02-03 11:03:13",
  };
  try {
    const postRes = await postCar(data);
  } catch (error) {
    ElMessage({message:"添加的车辆车牌号有问题，请查询后添加",
        type:"warning",
    })
    return;
  }finally{
    updatePostCarResult(true);
  }
  //将车的数量做更改
  let carnum = (await getCarNum())[0].num;
  carnum++;
  updateCarNum(carnum);
  const markers = createMarker(map,[data]);
  //将标注添加到mapStore中的makers数组中
  mapStore.Marker.push(markers[0]);
};
</script>

<style scoped>
.popup-div {
  margin: 15px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 200px;
}
</style>
